import { observer } from 'mobx-react'

import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import {
    Form,
    Input,
    Button,
    DatePicker,
    Radio,
    Select,
    Checkbox,
    Card,
    message,
    Row,
    Col,
    Affix
} from 'antd'
import dayjs, { Dayjs } from 'dayjs'


interface Continent {
    label: string
    countries: string[]
}


const { TextArea } = Input


// 表单的字段类型示例
interface TenantFormValues {
    name: string
    code: string
    validTime?: [Dayjs, Dayjs]
    domain?: string
    status: boolean
    description?: string
}
const MenuiManagementAdd: React.FC = () => {
    const [form] = Form.useForm()
    const navigate = useNavigate()
    const [loading, setLoading] = useState(false)

    // 提交表单
    const handleSubmit = async () => {
        try {
          setLoading(true)
          console.log('提交的值:', form)
          // TODO: 调用添加接口
          message.success('新增成功')
            navigate(-1) // 返回租户列表
        } catch (error) {
          message.error('添加失败')
        } finally {
          setLoading(false)
        }
      }
    return (
        <div className="add-app-detail">
            <div className="basic-info">
            <div className="title">基本信息</div>
                <Form
                    form={form}
                    labelCol={{ span: 4 }}
                >
                    {/* ======== 基本信息 ======== */}
                    <Form.Item
                        label="按钮名称"
                        name="name"
                        rules={[{ required: true, message: '请输入按钮名称' }]}
                    >
                        <Input placeholder="请输入按钮名称" />
                    </Form.Item>
                    <Form.Item
                        label="菜单类型"
                        name="roleId"
                        rules={[{ required: true, message: '请选择菜单类型' }]}
                        initialValue="按钮" // 默认选哪项
                    >
                        <Radio.Group>
                            <Radio value="菜单">菜单</Radio>
                            <Radio value="按钮">按钮</Radio>
                            <Radio value="筛选">筛选</Radio>
                        </Radio.Group>
                    </Form.Item>

                    <Form.Item
                        label="上级菜单"
                        name="dataPermission"
                        rules={[{ required: true, message: '请选择上级菜单' }]}
                        initialValue="全部"
                    >
                        <Select placeholder="请选择上级菜单">
                            <Select.Option value="全部">全部</Select.Option>
                            <Select.Option value="本级及子级">本级及子级</Select.Option>
                            <Select.Option value="本级">本级</Select.Option>
                            <Select.Option value="本人">本人</Select.Option>
                            <Select.Option value="自定义">自定义</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item
                        label="排序"
                        name="sort"
                        rules={[{ required: true, message: '请输入排序' }]}
                    >
                        <Input placeholder="请输入排序" />
                    </Form.Item>
                    </Form>
                    </div>
                    <div className="basic-info">
                    <div className="title">菜单配置</div>
                    <Form
                        form={form}
                        labelCol={{ span: 4 }}
                    >
                        <Form.Item
                            label="权限标识"
                            name="role"
                            rules={[{ required: true, message: '请输入权限标识' }]}
                        >
                            <Input placeholder="请输入权限标识" />
                        </Form.Item>
                </Form>
            <div className="form-actions">
                <Button type="primary" loading={loading} onClick={handleSubmit}>
                    保存
                </Button>
                <Button onClick={() => navigate(-1)}>返回</Button>
            </div>
        </div>
        </div>
    )
}

export default observer(MenuiManagementAdd)
